<%--
  Created by IntelliJ IDEA.
  User: 谢斌
  Date: 2021/1/26
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../ctx.jsp"/>
<html>
<head>

    <title>餐馆王平台</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="${ctx}/detail/style/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/detail/style/js/page_common.js"></script>
    <link href="${ctx}/detail/style/css/common_style_blue.css" rel="stylesheet" type="text/css">
    <link rel="${ctx}/detail/stylesheet" type="text/css" href="style/css/index_1.css"/>
    <link href="${ctx}/detail/style/css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body style="text-align: center">
<div id="all">
    <div id="menu">
        <!-- 显示菜品的div -->
        <div id="top">
            <ul>
                <!-- 循环列出餐品 -->
                <c:forEach items="${pageBean.list}" var="pageBean" varStatus="vs">
                <li onclick="toFoodDetail(${pageBean.foodId})">
                    <dl>
                        <dt>
                            <span>
                                <img width="214px" height="145px" src="${pageContext.request.contextPath}${pageBean.image}"/>
                            </span>
                        </dt>
                        <dd class="f1">
                            <span>${pageBean.foodName}</span>
                        </dd>
                        <dd class="f2">
                            <span>&yen;${pageBean.price}</span>
                        </dd>
                    </dl>
                </li>
                </c:forEach>
            </ul>
        </div>

        <!-- 底部分页导航条div -->
        <div id="foot">

            <span style="float:left; line-height:53PX; margin-left:-50px; font-weight:bold; ">
                <span class="food-page" onclick="prev(${pageBean.pageIndex});">&lt;&lt;</span>
            </span>

            <div id="btn">
                <ul>
                    <!-- 参看 百度, 谷歌是 左 5 右 4 -->

                    <c:forEach var="page" begin="1" end="${pageBean.totalPages}">
                        <li >
                            <a <c:if test="${page == pageBean.pageIndex}">style='color:blue;'</c:if>
                               href="front?action=findFoodByPage&pageIndex=${page}" >${page}
                            </a>
                        </li>
                    </c:forEach>

            </div>

            <span style="float:right; line-height:53px; margin-right:10px; font-weight:bold; ">
                <span class="food-page" onclick="next(${pageBean.pageIndex});">&gt;&gt;</span>
            </span>

        </div>

    </div>

    <!-- 右边菜系列表，菜品搜索框  -->
    <div id="dish_class">
        <div id="dish_top">
            <ul>
                <li class="dish_num"></li>
                <li>
                    <a href="foodcart?action=find">
                        <img src="${ctx}/detail/style/images/call2.gif"/>
                    </a>
                </li>
            </ul>
        </div>

        <div id="dish_2">
            <ul>
                <c:forEach items="${sessionScope.front_foodType}" var="type">
                    <li>
                        <a href="front?action=findFoodByPage&typeId=${type.typeId}">
                            ${type.typeName}
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div id="dish_3">
            <!-- 搜索菜品表单  -->
            <form action="front?action=findFoodByPage" method="post">
                <table width="166px">
                    <tr>
                        <td>
                            <input type="text" id="dish_name" name="foodName" class="select_value"/>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="sub" value=""/></td>
                    </tr>
                    <tr>
                        <td>
                            <!--查看菜单-->
                            <a href="/front?action=findFoodByPage">
                                <img src="${ctx}/detail/style/images/look.gif"/>
                            </a>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
</body>

<script>
    //上一页
    function prev(pageIndex) {
        if(pageIndex > 1) {
            location.href = "front?action=findFoodByPage&pageIndex=" + (pageIndex-1);
        }
    }

    //下一页
    function next(pageIndex) {
        if(pageIndex < ${pageBean.totalPages}) {
            location.href = "front?action=findFoodByPage&pageIndex=" + (pageIndex+1);
        }
    }

    function toFoodDetail(id) {
        location.href = "front?action=findFoodById&foodId=" + id;
    }

</script>
</html>
